<!--   @author  Created By  YS  on 2023/10/22 -->
<!--   @describe  vip介绍卡片 -->

<template>
  <div>
    <div class="vip-card" v-if="cardType == 'simple'">
      <div class="vip-info">
        <div>
			<image class="vip-info-img" src="../../../static/my/vip.png" mode=""></image>
          <!-- <img class="vip-info-img" src="../../../assets/icon/arrow-up-bold.png" alt=""> -->
          <text>开通会员，解锁全部权益</text>
        </div>
        <div class="vip-text-btn" @click="openVip">立即开通</div>
      </div>
      <div class="vip-content" >
        <div class="vip-content-li" @click="goPage('followMe')">
          <text class="vip-content-num">100</text>
          <text class="vip-content-word">关注我</text>
        </div>
        <div class="vip-content-li" @click="goPage('meFollow')">
          <text class="vip-content-num">100</text>
          <text class="vip-content-word">我关注</text>
        </div>
        <div class="vip-content-li" @click="goPage('checkMe')">
          <text class="vip-content-num">100</text>
          <text class="vip-content-word">看过我</text>
        </div>
      </div>
    </div>
    <div class="vip-card-box" v-if="cardType == 'normal'">
<!--      <div class="vip-info">-->
<!--        <div>-->
<!--          <img class="vip-info-img" src="../../../assets/icon/arrow-up-bold.png" alt="">-->
<!--          <text>开通会员，解锁全部权益</text>-->
<!--        </div>-->
<!--        <div class="vip-text-btn">立即开通</div>-->
<!--      </div>-->
      <div class="vip-card">
        <div class="vip-info">
          <div>
			  <image src="../../../static/my/vip.png" mode=""></image>
            <!-- <img class="vip-info-img" src="../../../assets/icon/arrow-up-bold.png" alt=""> -->
            <text>开通会员，解锁全部权益</text>
          </div>
          <div class="vip-text-btn" @click="PayVip">立即开通</div>
        </div>
        <div class="vip-content">
          <div class="vip-content-li">
            <text class="vip-content-num">100</text>
<!--            <text class="vip-content-word">关注我</text>-->
          </div>
          <div class="vip-content-li">
            <text class="vip-content-num">100</text>
<!--            <text class="vip-content-word">我关注</text>-->
          </div>
          <div class="vip-content-li">
            <text class="vip-content-num">100</text>
<!--            <text class="vip-content-word">看过我</text>-->
          </div>
          <div class="vip-content-li">
            <text class="vip-content-num">100</text>
            <!--            <text class="vip-content-word">看过我</text>-->
          </div>
        </div>
        <div class="vip-Introduction">
          <div>身份标识</div>
          <div>高级筛选</div>
          <div>谁看过我</div>
          <div>谁关注我</div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'vipCard',
  props: {
    cardType:{
      type: String,
      default: 'simple'
    }
  },
  data() {
    return {}
  },
  methods: {
	  openVip() {
		  uni.navigateTo({
		  	url:"/pages/my/vipPage"
		  })
	  },
    goPage(page) {
      console.log(page);
      this.$emit('go',page)
    },
    PayVip(){

    }
  }
}
</script>

<style lang='scss' scoped>
  .vip-card {
    width: 672rpx;
    height: 233rpx;
    border-radius: 20rpx;
    opacity: 1;
    border: 0 solid #979797;
    background: #7355ff;
    margin: 0 auto;
  }
  .vip-info{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    image{
      width: 34rpx;
      height: 34rpx;
	  vertical-align: middle;
    }
    text{
      font-size: 30rpx;
      color: #fff;
    }
    .vip-text-btn{
      width: 136rpx;
      height: 42rpx;
      border-radius: 21rpx;
      opacity: 1;
      border: 3rpx solid #ffffff;
      color: #ffffff;
      text-align: center;
      font-size: 24rpx;
      font-weight: 0;
      line-height: 42rpx;
      letter-spacing: 0.4rpx;
  }
  }
  .vip-content{
    margin-top: 28rpx;
    display: flex;
    flex-direction: row;
    .vip-content-li{
      flex:1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    &-num{
      color: #000;
      font-size: 36rpx;
      margin-bottom: 19rpx;
    }
    &-word{
      font-size: 24rpx;
      color: #999;
    }
  }
  .vip-card-box{
    margin: 0 auto;
    width: 672rpx;
    height: 325rpx;
    border-radius: 20rpx;
    background: #f3f0ff;
  }
  .vip-Introduction{
    display: flex;
    flex-direction:row;
    margin-top: 60rpx;
    margin-bottom: 30rpx;
    div{
      flex:1;
      text-align: center;
      font-size: 30rpx;
      color: #333;
    }
  }
</style>
